tags: ItIron2022 Javascript

前言

昨天我們完成了新增與展示卡片兩大核心功能，今天我們將完成最後的切換卡片功能，處理樣式的css都預先寫好了，大致上只要利用js加上對應的class就可以了，不用擔心！

Getting started

Step1: 切換展示的卡片

我們首先由切換卡片的部分開始吧，為了方便我們做測試，我們先把一些假資料直接塞到localStorage，請你先將以下的程式碼補進js檔案中。

const dummyData = [
  { question: "What's Javascript?", answer: "A programming language" },
  { question: "What's Vue.js?", answer: "A popular Front-end framework" },
  {
    question: "What are primitive values in Javascript?",
    answer:
      "There are 7 types. Boolean, Null, Undefined, String ,Number, BigInt and Symbol",
  },
];

localStorage.setItem("cards", JSON.stringify(dummyData));

根據寫在css的語法

我們知道需要在將要顯示的卡片上加上active class，並在現在顯示的卡片上加上left class，不過問題出現了，你要如何選到目前的卡片以及下一張卡片呢？ 這個部分有很多種做法，在這次專案中我們用一個變數來紀錄目前所有的卡片元素，你也可以直接用querySelectorAll去選取元素即可！ 我們會需要一個變數紀錄當前的卡片index，另一個變數則是紀錄所有目前有的卡片元素，在每次建立卡片時我們都需要將該卡片(也就是整個element)推進紀錄卡片元素的陣列，理解之後就開始動手吧，請你在js檔案中補上以下的程式碼。

// 追蹤目前顯示卡片index的變數
let currentActiveCard = 0;

// 儲存所有卡片元素的變數
const cardsEl = [];

function createCard(data, index) {
  // 略

  card.addEventListener("click", () => {
    card.classList.toggle("show-answer");
  });

  // 建立卡片時將元素推到cardsEl陣列
  cardsEl.push(card); // 加入這行程式碼

  cardsContainer.appendChild(card);

}

檢查一下，加個log看看是否真的有抓到所有的元素

很好！ 一切如預期，那麼我們就可以開始進行下一步了！

我們在畫面上有prev & next兩個按鈕，這邊為了方便理解我們分別替他們掛上監聽器，監聽器內要做的事情很單純

1. 將目前的卡片元素className修改為"card left"/"card"(看是prev還是next按鈕)
2. 更新currentActiveCard的值，令其指向更新後的index
3. 判斷是否有上一張/下一張卡片，若沒有則令currentActiveCard為0或是最後一個index(看是prev還是next按鈕)
4. 更新下方的顯示數字(比方說從第一張卡切換到第二張時，就是1/3 => 2/3)

// 選擇需要的元素
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

function createCard(data, index) {
    // 略
    updateCurrentText(); // 補上這行
}

// 更新下方卡片次序文字的函數
function updateCurrentText() {
  currentEl.innerText = `${currentActiveCard + 1}/${cardsEl.length}`;
}

// 切換按鈕的事件監聽
nextBtn.addEventListener("click", () => {
  cardsEl[currentActiveCard].className = "card left";
  currentActiveCard++;

  if (currentActiveCard > cardsEl.length - 1) {
    currentActiveCard = cardsEl.length - 1;
  }
  cardsEl[currentActiveCard].className = "card active";
  updateCurrentText();
});

prevBtn.addEventListener("click", () => {
  cardsEl[currentActiveCard].className = "card";
  currentActiveCard--;

  if (currentActiveCard < 0) {
    currentActiveCard = 0;
  }
  cardsEl[currentActiveCard].className = "card active";
  updateCurrentText();
});

到此切換卡片的功能就結束了，沒有想像中的困難對吧！

Step2: 增加刪除所有卡片功能

這個步驟就相對簡單很多了！ 我們已經知道決定卡片顯示的是根據localStorage內的資料，那麼要清除卡片資料就只要把localStorage清空就好囉！
請你在js中補上以下的內容

// 選取刪除按鈕元素
const clearBtn = document.getElementById("clear");

// 監聽刪除按鈕
clearBtn.addEventListener("click", () => {
  // 清除localStorage
  localStorage.clear();
    
  // 重整頁面以利於後續刷新畫面
  window.location.reload();
});

Step3: 可能的優化方向

到此demo中的所有功能就已經完成了，但就跟之前所有的微型專案一樣，裡面有一些很明顯需要優化的東西，這些就當回家作業，有興趣的可以自己挑戰一下！ 歡迎用這些作為基底打造出你自己的作品，我這邊列出一些可能的優化方向，你自然也可以補上額外的優化

• 刪除單一卡片的功能
• 沒有卡片時的placeholder
• 不同卡組間的切換

總結

我們今天終於完成了整個記憶卡的頁面，過程稍微冗長了些但希望你有從中獲取一些技巧與方向，這系列的微型專案都遠遠稱不上完美，有許多你明顯可以優化的地方，希望真的有照著教學做的人不要停在這邊，繼續加入自己的一些創意，自己動手永遠是最好的練習方式之一！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，我順利的收到幾個offer了，我到底該選哪一個才好啊？

這應該是我被問過最多的問題之一了，但每每遇到這種問題我的回應都是基於同一個想法:「我並不打算為你的人生負責」，因此當你問我要不要去這家公司面試、要不要接受某個offer，除非是那種很明顯有貓膩的，否則這類的意見我從來不會給直接的答案。 我做的僅是分析你提供的選擇，最終的決定權務必要掌握在自己的手中，這才是真正不會有遺憾的選擇方式。

在選擇offer時你必須先思考自己在乎的到底是什麼，有幾個常見的考量你可以做一下排序

• 上班地點
• 薪資待遇
• 團隊環境
• 產品
• 公司發展性
• 工作內容

一定會有個優先度最高的東西(對大多數人而言都是薪資第一，我懂)，盡可能地去獲取情報，最終將幾個offer去做排序，很多時候來問我的人自己心裡早就有答案了，只是希望別人推他一把，還是那一句，都是大人了要學會自己做決定，而為了做出好的決定你需要許多的資訊，台灣軟體圈子極小，你有心的話一定可以獲取許多能幫助你決策的資訊！ 祝好運！

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!